<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@page isELIgnored="false" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>用户注册</title>
    <link rel="stylesheet" href="render/css/frontend/common/base.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/common/shop_common.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/common/global.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_header.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/login-register.css" type="text/css"/>

    <style type="text/css">
        dt.checkcode {
            padding: 10px 0 0 0;
        }
        dd.checkImage {
            height: 32px;
        }
        img.checkimag {
            position: relative;
            top: 7px;
        }
    </style>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>
</head>
<body>

<div class="header wrap1000">
    <a href="/"><img src="render/images/logo.png" alt="ShopCZ"/></a>
</div>

<div class="main">
    <div class="login-form fr">
        <div class="form-hd">
            <h3>用户注册</h3>
        </div>
        <div class="form-bd">
            <form action="#" method="post">
                <dl>
                    <dt>用户名</dt>
                    <dd>
                        <input type="text" name="username" class="text" id="username" placeholder="用户名不能和已有的重复"/>
                    </dd>
                </dl>
                <dl>
                    <dt>密码</dt>
                    <dd>
                        <input type="password" name="password" class="text" id="password" placeholder="英文大小及数字6~32位"/>
                    </dd>
                </dl>
                <dl>
                    <dt>确认密码</dt>
                    <dd>
                        <input type="password" name="repassword" id="repassword" class="text" placeholder="请输入确认密码"/>
                    </dd>
                </dl>
                <dl>
                    <dt>邮箱</dt>
                    <dd><input type="text" name="email" class="text" placeholder="邮箱不能和已有的重复"/></dd>
                </dl>
                <dl>
                    <dt class="checkcode">验证码</dt>
                    <dd class="checkImage">
                        <input type="text" id="imageCode" name="code" class="text" size="10" style="width:58px;">
                        <img class="checkimag" onclick="changeVerifyCode(this)" src="/render/validate/CodeImage"/>
                    </dd>
                </dl>
                <div><span style="color:red">${info }</span></div>
                <dl>
                    <dt>&nbsp;</dt>
                    <dd>
                        <input type="button" value="立即注册" class="submit"/>
                        <input type="checkbox" id="myCheckBox" checked="checked"/>阅读并同意

                        <a href="javascript:void(0);" class="forget">服务协议</a>
                    </dd>
                </dl>
            </form>
        </div>
        <div class="form-ft">

        </div>
    </div>

    <div class="login-form-left fl">
        <dl class="func clearfix">
            <dt>注册之后您可以</dt>
            <dd class="ico05"><i></i>购买商品支付订单</dd>
            <dd class="ico01"><i></i>申请开店销售商品</dd>
            <dd class="ico03"><i></i>空间好友推送分享</dd>
            <dd class="ico02"><i></i>收藏商品关注店铺</dd>
            <dd class="ico06"><i></i>商品资讯服务评价</dd>
            <dd class="ico04"><i></i>安全交易诚信无忧</dd>
        </dl>

        <div class="if">
            <h2>如果您是本站用户</h2>
            <p>
                我已经注册过账号，立即 <a href="/render/login" class="register">登录</a> 或是 <a href="javascript:void(0);" class="findpwd">找回密码？</a>
            </p>
        </div>
    </div>
</div>

<jsp:include page="common/footer.jsp"></jsp:include>
<script type="text/javascript">

    /**
     * 验证码操作
     */
    function changeVerifyCode(img) {
        img.src = "/render/validate/CodeImage?" + Math.floor(Math.random() * 100);
    }

    $("#myCheckBox").change(function() {
        console.log($(this).prop("checked"));
        console.log(this.checked);
        $("#myCheckBox").attr("checked",$(this).prop("checked"));
    });

    $(function () {
        var url = '/render/user/register';

        $('.submit').click(function() {

            if(!$("#myCheckBox").prop("checked")){
                HFalert({title: "需要阅读并同意 服务协议", type: 'warning', confirmButtonText: '确定'});
                return;
            }

            // 获取输入的帐号
            var userName = $('#username').val();
            if (userName == null || userName === "") {
                HFalert({title: "帐号不能为空", type: 'warning', confirmButtonText: '确定'});
                $(".checkimag").click();
                return;
            }

            // var isPassword = /^([_]|[a-zA-Z0-9]){6,32}$/;
            // 获取输入的密码
            var password = $('#password').val();
            /*if(!isPassword.test(password)){
                HFalert({title:"密码不符合要求", type: 'warning', confirmButtonText: '确定'});
                $(".checkimag").click();
                return;
            }*/
            if (password == null || password === "") {
                HFalert({title: "密码不能为空", type: 'warning', confirmButtonText: '确定'});
                $(".checkimag").click();
                return;
            }
            // 获取输入的密码
            var repassword = $('#repassword').val();
            /*if(!isPassword.test(repassword)){
                HFalert({title:"密码不符合要求", type: 'warning', confirmButtonText: '确定'});
                $(".checkimag").click();
                return;
            }*/
            if (repassword == null || repassword === "") {
                HFalert({title: "确认密码不能为空", type: 'warning', confirmButtonText: '确定'});
                $(".checkimag").click();
                return;
            }

            if (password!=repassword){
                HFalert({title: "两次密码输入不一致", type: 'warning', confirmButtonText: '确定'});
                $(".checkimag").click();
                return;
            }

            // 获取输入的验证码
            var imageCode = $('#imageCode').val();
            if (imageCode == null || imageCode === "") {
                HFalert({title: "验证码不能为空", type: 'warning', confirmButtonText: '确定'});
                $(".checkimag").click();
                return;
            }

            // 获取输入的帐号
            var userName = $('#username').val();
            // 获取输入的密码
            var password = $('#password').val();
            // 获取输入的密码
            var imageCode = $('#imageCode').val();

            // 访问后台进行注册验证
            $.ajax({
                url : url,
                dataType: "text",
                type : "post",
                data : {
                    username : userName,
                    password : password,
                    imageCode : imageCode
                },
                success : function(data) {
                    data=JSON.parse(data);
                    if (data.success) {
                        window.location.href = '/render/login';
                    }else {
                        $("#username").val("");
                        $("#password").val("");
                        $("#imageCode").val("");
                        $("#repassword").val("");
                        $(".checkimag").click();
                        // console.log(data.success+","+data.message);
                        HFalert({title: "注册失败，"+data.message!=null?data.message:"参数有问题", type: 'warning', confirmButtonText: '确定'});
                    }
                }
            });
        });
    })
</script>
</body>
</html>